import style from '../../assets/css/Echart/Finance/Finance.module.css'
import IncomeColumn from "../../components/finance/IncomeColumn.tsx";
import Consume from "../../components/finance/Consume.tsx";
import Proportion from "../../components/finance/Proportion.tsx";
import {
    Expenditure,
    HighIncome,
    MedicalIncome,
    Quarter, RevenueDetails,
    Statistics
} from "../../components/finance/MicroComp.tsx";
import ExpenditureColumn from "../../components/finance/ExpenditureColumn.tsx";
import outUrl from '../../assets/image/图层555.png' //门诊图
import hosUrl from '../../assets/image/图层555(1).png' //住院图
import medUrl from '../../assets/image/图层555(2).png' //药物图
import icon1 from '../../assets/image/图层 523.png'
import icon2 from '../../assets/image/图层 522.png'
import icon3 from '../../assets/image/图层 523(1).png'
import icon4 from '../../assets/image/图层523(2).png'
import icon5 from '../../assets/image/图层 523(3).png'
import icon6 from '../../assets/image/图层 523(4).png'
import icon7 from '../../assets/image/图层 523(5).png'
import icon8 from '../../assets/image/图层 523(6).png'
import icon9 from '../../assets/image/图层 522(1).png'
import icon10 from '../../assets/image/图层 522(2).png'


function FinanceEcharts() {
    return (
        <div className={style.container}>
            <div className={style.left}>
                <div className={`${style.incomeStructure} ${style.box}`}>
                    <div className={style.title}>
                        全院收入结构
                    </div>

                    <div className={style.content}>
                        <div className={style.highIncome}>
                            <HighIncome title={'门诊'} count={'328172'} color={'#23FEFB'}/>
                            <HighIncome title={'住院'} count={'328172'} color={'#23B9FE'}/>
                        </div>

                        <div className={style.incomeColumn}>
                            <IncomeColumn/>
                        </div>
                    </div>

                </div>
                <div className={`${style.consumables} ${style.box}`}>
                    <div className={style.title}>
                        耗材消耗分析
                    </div>
                    <div className={style.content}>
                        <div className={style.count}>
                            <div className={style.left}/>
                            <div className={style.right}/>
                        </div>
                        <div className={style.classify}>
                            <Consume/>
                        </div>
                    </div>
                </div>
            </div>
            <div className={style.main}>
                <div className={style.overview}>
                    <div className={style.overviewBox}>
                        <div className={style.headTab}>
                            <MedicalIncome count={432834} title={'医疗总收入'} color={'#23FFFC'} bgColor={'#0A6175'}/>
                            <MedicalIncome count={287621} title={'门诊收入'} color={'#239AFF'} bgColor={'#0C4D74'}/>
                            <MedicalIncome count={145213} title={'住院收入'} color={'#FFD62F'} bgColor={'#385240'}/>
                        </div>
                        <div className={style.mainModel}>
                            <div className={style.up}>
                                <RevenueDetails title={'医保总额'} count={'21421'} company={'万元'} isSelect={false}
                                                icon={icon1}/>
                                <RevenueDetails title={'已使用医保额度'} count={'3215'} company={'万元'}
                                                isSelect={false} icon={icon2}/>
                                <RevenueDetails title={'医保结合额度'} count={'1231'} company={'万元'} isSelect={false}
                                                icon={icon3}/>
                                <RevenueDetails title={'医保比例占比'} count={'30%'} company={'万元'} isSelect={true}
                                                icon={icon4}/>
                                <RevenueDetails title={'结合医保比例'} count={'12%'} company={'%'} isSelect={false}
                                                icon={icon5}/>
                            </div>
                            <div className={style.down}>
                                <RevenueDetails title={'医生人数'} count={'488'} company={'人'} isSelect={false}
                                                icon={icon6}/>
                                <RevenueDetails title={'护士人数'} count={'971'} company={'人'} isSelect={false}
                                                icon={icon7}/>
                                <RevenueDetails title={'总床位数'} count={'3212'} company={'个'} isSelect={false}
                                                icon={icon8}/>
                                <RevenueDetails title={'空床位'} count={'02'} company={'个'} isSelect={false}
                                                icon={icon9}/>
                                <RevenueDetails title={'床位利用率'} count={'94%'} company={'%'} isSelect={false}
                                                icon={icon10}/>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={`${style.proportion} ${style.box}`}>
                    <div className={style.title}>
                        科室收入占比
                    </div>
                    <div className={style.content}>
                        <div className={style.options}>
                            <Statistics title={'门诊（个）'} count={1271} url={outUrl}/>
                            <Statistics title={'住院（个）'} count={3212} url={hosUrl}/>
                            <Statistics title={'药物（个）'} count={55213} url={medUrl}/>
                        </div>
                        <div className={style.chart}>
                            <Proportion/>
                        </div>
                    </div>
                </div>
            </div>
            <div className={style.right}>
                <div className={`${style.expenditure} ${style.box}`}>
                    <div className={style.title}>
                        财务费用支出分析
                    </div>
                    <div className={style.content}>
                        <div className={style.expenditure}>
                            <Expenditure count={32531} title={'运营支出'}/>
                            <Expenditure count={13325} title={'人员经费'}/>
                            <Expenditure count={62255} title={'人才培养'}/>
                            <Expenditure count={72123} title={'固定资产'}/>
                        </div>
                        <div className={style.expenditureChart}></div>
                    </div>
                </div>
                <div className={`${style.vulnerable} ${style.box}`}>
                    <div className={style.title}>
                        易损消耗支出
                    </div>
                    <div className={style.content}>
                        <div className={style.tab}>
                            <Quarter title={'第一季度'} select={false}/>
                            <Quarter title={'第二季度'} select={true}/>
                            <Quarter title={'第三季度'} select={false}/>
                            <Quarter title={'第四季度'} select={false}/>
                        </div>
                        <div className={style.column}>
                            <ExpenditureColumn/>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default FinanceEcharts;